// 函数式调用组件
import { createVNode, render } from 'vue'
import XtxMessage from './xtx-message.vue'

// 准备dom - 原生写法
// const div = document.createElement('div') // 创建div
// div.setAttribute('class', 'xtx-message-container') // 设置样式
// document.body.appendChild(div) // 渲染dom

// vue3 写法
const div = createVNode('div', { class: 'xtx-message-container' })
render(div, document.body)

let timer = null // 定时器
export default ({ type, text, animate }) => {
  // 创建 VNode - createVNode('组件名'， 标签内容)
  const vnode = createVNode(XtxMessage, { type, text })
  // 把 VNode 渲染到 dom
  render(vnode, div.el)
  // 延时移除
  clearTimeout(timer)
  timer = setTimeout(() => render(null, document.body), animate || 3000)
}
